<template>
  <div class="zyd">
    <header>
      <span>今日打卡</span>
      <img :src="avatar" alt="">
      <strong>MG.3</strong>
      <progress value="80" max="100">
      </progress>
      <p>再锻炼100分钟可升级为MG.4</p>
    </header>
    <section>
      <h3>总运动 <i class="iconfont">&#xe609;</i></h3>
      <div class="arc">
        <canvas id="myCanvas" ref="canvas" >

        </canvas>
        <span class="arc_num">2279</span>
        <span class="arc_min">分钟</span>
        <span class="arc_dk">打卡41天</span>
      </div>
      <div class="detail">
        <div>
          <h3>本周运动(分钟)</h3>
          <span>85</span>
        </div>
        <div>
          <h3>本周好友运动排名</h3>
          <span>16</span>
        </div>
      </div>
    </section>
    <div class="grey">
    </div>
    <div class="sport">
      <h3>推荐活动</h3>
      <div class="li">
        <div>
          <img :src="yf" alt="">
        </div>
        <h4>腰腹训练</h4>
        <p class="effect"><span>25分钟</span><span>燃脂1360/千卡</span></p>
        <p class="part"><span>L3</span><span >腰部</span></p>
        <div class="partake">已有1654人参与</div>
      </div>
      <div class="li">
        <div>
          <img :src="yf" alt="">
        </div>
        <h4>腰腹训练</h4>
        <p class="effect"><span>25分钟</span><span>燃脂1360/千卡</span></p>
        <p class="part"><span>L3</span><span >腰部</span></p>
        <div class="partake">已有1654人参与</div>
      </div>
      <div class="li">
        <div>
          <img :src="yf" alt="">
        </div>
        <h4>腰腹训练</h4>
        <p class="effect"><span>25分钟</span><span>燃脂1360/千卡</span></p>
        <p class="part"><span>L3</span><span >腰部</span></p>
        <div class="partake">已有1654人参与</div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "HomeZyd",
    data() {
      return {
        avatar: require('../../assets/imgs/home/team-image-7.jpg'),
        yf:require('../../assets/imgs/home/yf.jpg')
      }
    },
    mounted() {
      var canvas = this.$refs.canvas;
      //创建画笔
      var ctx = canvas.getContext('2d');
      var angle=2*Math.PI/6;
      ctx.beginPath();
      // ctx.moveTo(60,60);//加上是半径那条线
      ctx.arc(60,60,50,2.2*angle,3.8*angle,false);
      //先设置颜色
      ctx.lineWidth=3;
      ctx.strokeStyle = "#FEDA05";
      ctx.stroke();

      ctx.beginPath();
      // ctx.moveTo(60,60);
      ctx.arc(60,60,50,3.8*angle,6.8*angle,false);
      //先设置颜色
      ctx.lineWidth=3;
      ctx.strokeStyle = "black";
      ctx.stroke();
    }
  }
</script>

<style lang="less">
  .zyd {
    header {
      width: 100%;
      height: 70px;
      background-color: #FEDA05;
      position: relative;

      span {
        position: absolute;
        width: 60px;
        height: 25px;
        line-height: 25px;
        border-radius: 12.5px;
        display: block;
        font-size: 12px;
        color: #feda05;
        background-color: #181718;
        left: 15px;
        top: 20px;
      }

      img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        position: absolute;
        left: 90px;
        top: 12px;
      }

      strong {
        color: #181718;
        font-family: "Helvetica Neue";
        font-size: 18px;
        position: absolute;
        left: 140px;
        top: 18px;
      }

      progress {
        position: absolute;
        left: 200px;
        top: 28px;
        width: 160px;
        height: 5/2px;
        background-color: #fff;
      }

      progress::-webkit-progress-bar {
        background-color: #fff;
        border-radius: 5px;
      }

      progress::-webkit-progress-value {
        background-color: #181718;
        border-radius: 5px;
      }

      p {
        font-size: 12px;
        color: #181718;
        position: absolute;
        top: 36px;
        left: 200px;
      }
    }

    section {
      overflow: hidden;
      .arc{

        width: 135px;
        height: 135px;
        margin: 0 auto;
        position: relative;
        font-weight: bolder;
        font-size: 18px;
        .arc_num{
          position: absolute;
          top: 20px;
          left: 44px;
        }
        .arc_min{
          position: absolute;
          top: 40px;
          font-weight: normal;
          left: 44px;
        }
        .arc_dk{
          font-size: 12px;
          font-weight: normal;
          position: absolute;
          top: 80px;
          left: 40px;
          color: #333;
        }
      }
      h3 {
        font-size: 17px;
        text-align: left;
        padding: 12px 20px 0 10px;

        i {
          float: right;
          color: #181718;
          font-size: 20px;
        }
      }

      .detail {
        div:nth-child(1) {
          float: left;

          h3 {
            font-weight: 400;
            margin-bottom: 5px;
          }

          span {
            font-weight: bolder;
            font-size: 18px;

          }

          margin-left: 20px;
        }

        div:nth-child(2) {
          float: right;

          h3 {
            font-weight: 400;
            margin-bottom: 5px;
          }

          span {
            font-weight: bolder;
            font-size: 18px;
          }

          margin-right: 20px;
        }
      }

    }

    .grey {
      width: 100%;
      height: 15px;
      background-color: #efefef;
    }

    .sport{
      .li{
        position: relative;
      }
      position: relative;
      color: rgba(255,255,255,.7);
      letter-spacing: 2px;
      h3 {
        font-size: 17px;
        color: #171818;
        text-align: left;
        margin-left: 10px;

      }
      img{
        margin-top: 10px;
        width: 355px;
        height: 160px;
      }
      h4{
        position: absolute;
        top: 55px;
        left: 44px;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
      }
      .effect{
        position: absolute;
        top: 95px;
        left: 44px;
        span:nth-child(2){
          margin-left: 20px;
        }
      }
      .part{
        position: absolute;
        top: 126px;
        left: 44px;
        span:nth-child(2){
          margin-left: 20px;
        }
      }
      .partake{
        position: absolute;
        top: 140px;
        right: 44px;
      }
    }
  }
</style>
